import React, { useEffect, useRef, useState } from 'react'
import { ProTable } from '@ant-design/pro-components'
import {
  Button,
  Space,
  Image,
  Popconfirm,
  Modal,
  Form,
  Input,
  Select,
  InputNumber,
  Alert,
  Tree,
  Drawer,
  App
} from 'antd'
import { EditTwoTone, PlusOutlined } from '@ant-design/icons'
import { useModel, useSearchParams } from '@umijs/max'
import styles from './index.less'

const { TextArea } = Input
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
}

export default () => {
  const [shopList, setShopList] = useState([])
  const [sortNum, setSortNum] = useState(null) //  商品排序值
  const [sortingKey, setSortingKey] = useState(null) //  商品排序
  const [goodsPageSize, setGoodsPageSize] = useState(10) //  每页数量
  const [addGoodsPageSize, setAddGoodsPageSize] = useState(10) //  每页数量
  const [formRef] = Form.useForm()
  const { message } = App.useApp()

  const selectGoodsColumns = [
    {
      title: '商品名称',
      dataIndex: 'goods_name',
      width: 200,
      render: (text, record) => (
        <Space>
          <Image width={48} src={record.goods_cover_url} />
          <a onClick={() => goProduct(3, record.id, record.merchant_id)}>{text}</a>
        </Space>
      )
    },
    {
      title: '商品ID',
      dataIndex: 'id',
      width: 60,
      hideInTable: true
    },
    {
      title: '买断价',
      dataIndex: 'buyout_price_range',
      hideInSearch: true,
      width: 140
    },
    {
      title: '租赁信息',
      dataIndex: 'rent_meal_info',
      hideInSearch: true,
      width: 300,
      render: (text, record) => {
        const { use_scope } = record
        if (use_scope && use_scope.includes('rent')) {
          const { deposit, lease_terms, per_rent_range, periods } = text
          return (
            <>
              <div>
                押金：{deposit[0]}~{deposit[1]}
              </div>
              <div>
                租期：{periods[0]}~{periods[1]}
              </div>
              <div>
                期数：{lease_terms[0]}~{lease_terms[1]}
              </div>
              <div>
                每期租金：{per_rent_range[0]}~{per_rent_range[1]}
              </div>
            </>
          )
        } else {
          return '/'
        }
      }
    },
    {
      title: '买卖信息',
      dataIndex: 'buy_meal_info',
      hideInSearch: true,
      width: 300,
      render: (text, record) => {
        const { use_scope } = record
        if (use_scope && use_scope.includes('buy')) {
          const { first_pay_range, lease_terms, per_rent_range, periods } = text
          return (
            <>
              <div>
                首付款：{first_pay_range[0]}~{first_pay_range[1]}
              </div>
              <div>
                尾期：{lease_terms[0]}~{lease_terms[1]}
              </div>
              <div>
                期数：{periods[0]}~{periods[1]}
              </div>
              <div>
                每期尾款：{per_rent_range[0]}~{per_rent_range[1]}
              </div>
            </>
          )
        } else {
          return '/'
        }
      }
    },
    {
      title: '物流配送',
      dataIndex: 'delivery_type_names',
      width: 120,
      hideInSearch: true,
      render: text => (
        <>
          {text.map(i => (
            <div key={i} className={styles.delivery_name}>
              {i}
            </div>
          ))}
        </>
      )
    },
    {
      title: '归属店铺',
      dataIndex: 'shop_name',
      valueType: 'select',
      valueEnum: new Map(shopList),
      width: 120
    },
    {
      title: '提交时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      width: 220
    },
    {
      title: '操作',
      key: 'option',
      width: 80,
      valueType: 'option',
      fixed: 'right',
      render: (_, row, index, action) => {
        return (
          <a
            key='check'
            onClick={() => {
              goProduct(3, row.id, row.merchant_id)
            }}
          >
            详情
          </a>
        )
      }
    }
  ]
  const {
    GetPlatformGoodsList,
    GetShopSelections,
    UpdateGoodsDisplayStatus,
    GetPlatformGoodsCount,
    GetCategorySelections,
    SetGoodsCategory,
    GetGoodsForDisplay,
    GetForceRefuseReasons,
    GorceGoodsDown,
    UpdateGoodsSort,
    GetShowPlts
  } = useModel('Goods')

  // 商品列表
  // const [columns, setColumns] = useState(originColumns);
  const [batchShelfFlag, setBatchShelfFlag] = useState(true)
  const [currentSelectedRowKeys, setCurrentSelectedRowKeys] = useState([])

  // tab 选项卡
  const [tabActiveKey, setTabActiveKey] = useState('0')
  const [tabStatusCount, setTabStatusCount] = useState({})

  // 分页
  const [currentPage, setCurrentPage] = useState(1) //  当前页码

  const tableRef = useRef()
  const selectGoodsTableRef = useRef()

  // 强制下架弹窗
  const [shelfReasonModalFlag, setShelfReasonModalFlag] = useState(false)
  const [shelfReasonLoading, setShelfReasonLoading] = useState(false)
  const [reasonList, setReasonList] = useState([])
  const [nodtNeccesery, setNodtNeccesery] = useState(false)

  // 分类弹窗
  const [editCategoryModal, setEditCategoryModal] = useState(false)
  const [editCategoryLoading, setEditCategoryLoading] = useState(false)
  const [categoryList, setCategoryList] = useState([])
  const [categoryCheckedList, setCategoryCheckedList] = useState([])
  const [defaultExpandList, setDefaultExpandList] = useState([])
  const [categoryUsedIds, setCategoryUsedIds] = useState([])

  // 选择商品抽屉
  const [goodsDrawer, setGoodsDrawer] = useState(false)
  const [drawerSelectGoods, setDrawerSelectGoods] = useState([])

  // 渠道列表
  const [searchChannel, setSearchChannel] = useState([])
  const [currentChannel, setCurrentChannel] = useState(1)

  const [categoryChannel, setCategoryChannel] = useState([])
  const [currentCategoryChannel, setCurrentCategoryChannel] = useState(1)

  const [searchParams] = useSearchParams()

  useEffect(() => {
    getDisplayChannels()
    getShopList()
    getReasonList()

    // 判断是否打开从商品库选择弹窗
    if (searchParams.get('showDialog') === 'goodsDrawer') {
      triggerGoodsDrawer()
    }
  }, [])

  // useEffect(() => {
  //   setColumns([...originColumns]);
  // }, [shopList]);

  // 更改分类的tab展示
  const handleCategoryTab = item => {
    setCurrentCategoryChannel(item.id)
    getCategoryList(null, item.id)
  }

  // 获取展示渠道
  const getDisplayChannels = async () => {
    const res = await GetShowPlts()
    if (res) {
      let arr = []
      // eslint-disable-next-line guard-for-in
      for (const resKey in res) {
        arr.push({
          id: resKey,
          value: res[resKey]
        })

        //  默认展示第一个渠道的分类
        if (arr.length === 1) {
          setCurrentCategoryChannel(resKey)
        } else {
          setCurrentCategoryChannel(1)
        }
      }
      arr && setCategoryChannel(arr)
      arr && setSearchChannel(arr.map(i => [i.id, i.value]))
    }
  }

  //  排序状态切换
  const onSorting = (index, value) => {
    setSortNum(value)
    setSortingKey(index)
  }

  //  确认排序
  const onSort = async (value, id) => {
    const params = {
      id,
      sort: Math.floor(value)
    }
    const res = await UpdateGoodsSort(params)
    if (res) {
      setSortingKey(null)
      tableRef.current.reload()
    }
  }

  //  排序键盘事件
  const sortKeyDown = (e, id) => {
    const {
      code,
      target: { value }
    } = e
    if (code === 'Escape') {
      setSortingKey(null)
    } else if (code === 'Enter') {
      onSort(value, id)
    }
  }

  //  获取下架原因列表
  const getReasonList = async () => {
    const res = await GetForceRefuseReasons()
    setReasonList(
      res.map((i, index) => ({
        label: i,
        value: i,
        key: index
      }))
    )
  }

  //  获取店铺列表
  const getShopList = async () => {
    const res = await GetShopSelections()
    setShopList(res.map(i => [i.id, i.shop_name]))
  }

  //  修改分类
  const editCategory = async (ids, row) => {
    setCategoryUsedIds(ids)
    setCurrentCategoryChannel(1)
    await getCategoryList()
    if (row) {
      // console.log(row.category_ids);
      setCategoryCheckedList([...row.category_ids])
    }
    setEditCategoryModal(true)
    setBatchShelfFlag(true)
  }

  //  获取分类列表
  const getCategoryList = async (e, currentTab) => {
    let params = e ? { cate_name: e } : {}
    params.plt = currentTab ? currentTab : currentCategoryChannel
    const res = await GetCategorySelections(params)
    let list = []
    setCategoryList(
      res.map(i => {
        if (i.children && i.children.length) list.push(i.id)
        return {
          title: i.cate_name,
          key: i.id,
          disableCheckbox: true,
          children: i.children
            ? i.children.map(ch => ({
                title: ch.cate_name,
                key: ch.id,
                isChild: true
              }))
            : []
        }
      })
    )
    setDefaultExpandList(list)
    if (!e) {
      return Promise.resolve()
    }
  }

  // 关闭修改分类弹窗
  const closeEditCategoryModal = () => {
    setCurrentCategoryChannel(1)
    setEditCategoryModal(false)
  }

  // 选择类目处理
  const handleSelectCate = (selected, e) => {
    const { isChild, key } = e.node
    if (isChild) {
      const list = [...categoryCheckedList]

      const i = list.findIndex(id => id === key)
      if (i !== -1) {
        list.splice(i, 1)
      } else {
        list.push(key)
      }

      setCategoryCheckedList(list)
    }
  }

  // 选择类目处理
  const handleCheckCate = (selected, e) => {
    handleSelectCate(selected, e)
  }

  // 提交修改分类
  const handleConfirmEditCate = async () => {
    if (categoryCheckedList.length) {
      setEditCategoryLoading(true)
      const params = {
        id: categoryUsedIds,
        category_id: categoryCheckedList
      }
      await SetGoodsCategory(params)
      setCategoryCheckedList([])
      setEditCategoryLoading(false)
      closeEditCategoryModal()
      tableRef.current.reload()
    } else {
      message.warning('请至少选择一个分类')
    }
  }

  // 开关商品抽屉
  const triggerGoodsDrawer = () => {
    setGoodsDrawer(!goodsDrawer)
  }

  // 跳转商品页
  const goProduct = (type, id, merchant_id) => {
    let url = `/product?type=${type}&id=${id}&merchant_id=${merchant_id}`
    window.open(url)
  }

  // 关闭下架原因弹窗
  const triggerForceShelfModal = () => {
    setShelfReasonModalFlag(!shelfReasonModalFlag)
  }

  // 切换下架备注是否必填
  const checkNoteNeccesery = e => {
    setNodtNeccesery(e === '其他原因')
  }

  // 提交下架原因
  const confirmForceShelf = () => {
    formRef.submit()
  }

  // 提交下架原因表单
  const onForceShelfFinished = async e => {
    setShelfReasonLoading(true)
    const params = {
      ...e,
      id: drawerSelectGoods
    }
    await GorceGoodsDown(params)
    tableRef.current.reload()
    selectGoodsTableRef.current.reload()
    setShelfReasonLoading(false)
    setDrawerSelectGoods([])
    triggerForceShelfModal()
  }

  // 处理商品上下架
  const handleDisplay = async (type, id) => {
    const params = {
      id,
      status: type
    }
    await UpdateGoodsDisplayStatus(params)
    // await handleGetGoodsCount();
    tableRef.current.reload()
    type === 1 && goodsDrawer && triggerGoodsDrawer()
    setBatchShelfFlag(true)
    message.success(type === 1 ? '展示成功' : '取消展示成功')
  }

  // 判断批量上下架按钮是否可用
  const handleSelectChange = (selectedRowKeys, selectedRows) => {
    if (selectedRowKeys.length === 0) {
      setBatchShelfFlag(true)
      setCurrentSelectedRowKeys(selectedRowKeys)
    } else {
      setBatchShelfFlag(false)
      setCurrentSelectedRowKeys(selectedRowKeys)
    }
  }

  // 获取商品状态数量
  const handleGetGoodsCount = async () => {
    const res = await GetPlatformGoodsCount()
    setTabStatusCount(res)
  }

  // 格式化 tab
  const formatTabs = () => {
    const tabsItem = [
      {
        key: 0,
        tab: '全部',
        num: '0'
      },
      {
        key: 1,
        tab: '展示中',
        num: '0'
      },
      {
        key: 2,
        tab: '取消展示',
        num: '0'
      }
    ]
    // 0全部，1上架，2,已下架，3强制下架
    tabStatusCount &&
      tabStatusCount.length > 0 &&
      tabStatusCount.forEach(item => {
        tabsItem[item.type].num = item.count
      })
    let arr = []
    tabsItem.forEach(item => {
      arr.push({
        key: item.key,
        tab: (
          <div>
            <span>{item.tab}</span>
            <span className={Number(item.key) === Number(tabActiveKey) ? styles.tab_badge_active : styles.tab_badge}>
              {item.num}
            </span>
          </div>
        )
      })
    })
    return arr
  }

  // 处理 tab 切换
  const handleTabActive = key => {
    setTabActiveKey(key)
    setCurrentPage(1)
    setBatchShelfFlag(true)
    tableRef.current.reload()
  }

  const originColumns = [
    {
      title: '商品ID',
      dataIndex: 'id',
      width: 60
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name',
      width: 200,
      render: (text, record) => (
        <Space>
          <Image width={72} src={record.goods_cover_url} />
          <a onClick={() => goProduct(3, record.id, record.merchant_id)}>{text}</a>
        </Space>
      )
    },
    // 排序
    {
      title: '排序',
      dataIndex: 'sort',
      width: 100,
      hideInSearch: true,
      render: (item, record, index) =>
        sortingKey === index ? (
          <InputNumber
            onKeyDown={e => sortKeyDown(e, record.id)}
            precision={0}
            bordered={false}
            defaultValue={sortNum}
            autoFocus
            onBlur={e => onSort(e.target.value, record.id)}
          />
        ) : (
          <div style={{ cursor: 'pointer' }} onClick={e => onSorting(index, item)}>
            {item} <EditTwoTone />
          </div>
        )
    },
    {
      title: '买断价/购买价',
      dataIndex: 'buyout_price_range',
      hideInSearch: true,
      width: 140
    },
    {
      title: '展示渠道',
      width: 100,
      dataIndex: 'plts',
      valueType: 'select',
      valueEnum: new Map(searchChannel),
      fieldProps: {
        mode: 'multiple'
      },
      render: (text, record) => record.plts.map((i, index) => <div key={index}>{i}</div>)
    },
    {
      title: '租赁信息',
      dataIndex: 'rent_meal_info',
      hideInSearch: true,
      width: 220,
      render: (text, record) => {
        const { use_scope } = record
        if (use_scope && use_scope.includes('rent')) {
          const { deposit, lease_terms, per_rent_range, periods } = text
          return (
            <>
              <div>
                押金：{deposit[0]}~{deposit[1]}
              </div>
              <div>
                租期：{periods[0]}~{periods[1]}
              </div>
              <div>
                期数：{lease_terms[0]}~{lease_terms[1]}
              </div>
              <div>
                每期租金：{per_rent_range[0]}~{per_rent_range[1]}
              </div>
            </>
          )
        } else {
          return '/'
        }
      }
    },
    {
      title: '买卖信息',
      dataIndex: 'buy_meal_info',
      hideInSearch: true,
      width: 220,
      render: (text, record) => {
        const { use_scope } = record
        if (use_scope && use_scope.includes('buy')) {
          const { first_pay_range, lease_terms, per_rent_range, periods } = text
          return (
            <>
              <div>
                首付款：{first_pay_range[0]}~{first_pay_range[1]}
              </div>
              <div>
                尾期：{lease_terms[0]}~{lease_terms[1]}
              </div>
              <div>
                期数：{periods[0]}~{periods[1]}
              </div>
              <div>
                每期尾款：{per_rent_range[0]}~{per_rent_range[1]}
              </div>
            </>
          )
        } else {
          return '/'
        }
      }
    },
    {
      title: '物流配送',
      dataIndex: 'delivery_type_names',
      width: 120,
      hideInSearch: true,
      render: text => (
        <>
          {text.map(i => (
            <div key={i} className={styles.delivery_name}>
              {i}
            </div>
          ))}
        </>
      )
    },
    {
      title: '商品状态',
      dataIndex: 'is_display_text',
      hideInSearch: true,
      width: 120,
      align: 'center',
      valueEnum: {
        展示中: {
          text: '展示中',
          status: 'Success'
        },
        取消展示: {
          text: '取消展示',
          status: 'Error'
        }
      }
    },
    {
      title: '归属店铺',
      dataIndex: 'shop_name',
      valueType: 'select',
      valueEnum: new Map(shopList),
      fieldProps: {
        mode: 'multiple'
      },
      width: 120
    },
    {
      title: '提交时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      width: 200
    },
    {
      title: '商品分类',
      dataIndex: 'category_names',
      hideInSearch: true,
      width: 220,
      render: text => {
        let nameObj = {
          支付宝: '#1677ff',
          微信: '#52c41a',
          APP: '#faad14',
          H5: '#8242F9'
        }
        let arr = text.sort((a, b) => {
          return a.localeCompare(b, 'zh')
        })

        return arr.map((item, index) => {
          let name = item.split('/')[0]
          return (
            <div key={index} style={{ color: nameObj[name] }}>
              {item}
            </div>
          )
        })
      }
    },
    {
      title: '操作',
      key: 'option',
      width: 180,
      valueType: 'option',
      fixed: 'right',
      render: (_, row, index, action) => {
        return [
          <a
            key='check'
            onClick={() => {
              goProduct(3, row.id, row.merchant_id)
            }}
          >
            详情
          </a>,
          <a
            key='edit'
            onClick={() => {
              editCategory([row.id], row)
            }}
          >
            修改分类
          </a>,

          row.is_display === 1 ? (
            <Popconfirm
              key='1'
              title='取消展示后，商品将不再展示在小程序
              是否确定将该操作？'
              onConfirm={() => handleDisplay(2, [row.id])}
              okText='确认'
              cancelText='取消'
            >
              <a key='status' style={{ color: 'red' }}>
                取消展示
              </a>
            </Popconfirm>
          ) : (
            <a
              key='2'
              onClick={() => {
                handleDisplay(1, [row.id])
              }}
              style={{ color: '#1677ff' }}
            >
              展示商品
            </a>
          )
        ]
      }
    }
  ]

  return (
    <>
      <ProTable
        actionRef={tableRef}
        scroll={{ x: 'max-content' }}
        rowSelection={{
          selectedRowKeys: currentSelectedRowKeys,
          onChange: handleSelectChange
        }}
        request={async params => {
          const param = {
            page: params.current,
            page_size: params.pageSize,
            merchant_id: params.shop_name,
            goods_name: params.goods_name,
            id: params.id,
            after_approval_status: params.after_approval_status,
            is_display: tabActiveKey,
            plt: params.plts
          }
          setCurrentPage(params.current)
          setGoodsPageSize(params.pageSize)
          params.plts && setCurrentChannel(params.plts)
          const res = await GetPlatformGoodsList(param)
          setCurrentSelectedRowKeys([])
          await handleGetGoodsCount()
          return {
            data: res.data,
            success: true,
            total: res.total
          }
        }}
        pagination={{
          pageSize: goodsPageSize,
          current: currentPage
        }}
        rowKey='id'
        // columns={columns}
        columns={originColumns}
        headerTitle={
          <Button icon={<PlusOutlined />} onClick={triggerGoodsDrawer} key={Math.random().toString()} type='primary'>
            从商品库选择
          </Button>
        }
        toolBarRender={() => [
          <Button
            key={Math.random().toString()}
            disabled={batchShelfFlag}
            onClick={() => editCategory(currentSelectedRowKeys)}
          >
            修改分类
          </Button>,
          <Button
            type='primary'
            key={Math.random().toString()}
            disabled={batchShelfFlag}
            onClick={() => handleDisplay(1, currentSelectedRowKeys)}
          >
            展示商品
          </Button>,
          <Popconfirm
            key='1'
            title='取消展示后，商品将不再展示在小程序是否确定将该操作？'
            onConfirm={() => handleDisplay(2, currentSelectedRowKeys)}
            okText='确认'
            cancelText='取消'
            disabled={batchShelfFlag}
          >
            <Button danger key={Math.random().toString()} disabled={batchShelfFlag}>
              取消展示
            </Button>
          </Popconfirm>
        ]}
        search={{
          defaultCollapsed: false,
          labelWidth: 75,
          span: 8
        }}
        toolbar={{
          multipleLine: true,
          tabs: {
            onChange: key => handleTabActive(key),
            activeKey: tabActiveKey,
            items: formatTabs()
          }
        }}
      />

      {/*修改分类弹窗*/}
      <Modal
        title={'修改分类'}
        mask
        open={editCategoryModal}
        onCancel={closeEditCategoryModal}
        bodyStyle={{ padding: '20px 0' }}
        width={640}
        destroyOnClose
        footer={
          <>
            <Button onClick={closeEditCategoryModal}>取消</Button>
            <Button type={'primary'} loading={editCategoryLoading} onClick={handleConfirmEditCate}>
              提交
            </Button>
          </>
        }
      >
        <Space direction='vertical'>
          <div className={styles.category_tab}>
            {categoryChannel.map((item, index) => {
              return (
                <div
                  key={item.id}
                  className={
                    styles.category_tab_item +
                    ' ' +
                    (Number(currentCategoryChannel) === Number(item.id) ? styles.category_tab_item_active : '')
                  }
                  onClick={() => handleCategoryTab(item)}
                >
                  {item.value}
                </div>
              )
            })}
          </div>
          <Alert
            message='仅支持移动至二级分类（可多选），如需修改分类名称，请前往「商品分类」下操作。'
            type='info'
            showIcon
          />
          <Input.Search
            placeholder='搜索分类名称'
            onSearch={e => getCategoryList(e)}
            style={{ width: 200, marginTop: 20 }}
          />
          <Tree
            treeData={categoryList}
            checkable
            onCheck={handleCheckCate}
            onSelect={handleSelectCate}
            expandedKeys={defaultExpandList}
            height={350}
            checkedKeys={categoryCheckedList}
          ></Tree>
        </Space>
      </Modal>

      {/*添加商品抽屉*/}
      <Drawer
        title='选择商品'
        placement='right'
        className={styles.goods_drawer_wrapper}
        onClose={triggerGoodsDrawer}
        open={goodsDrawer}
        width={980}
        destroyOnClose
        footer={
          <div className={styles.drawer_footer}>
            <Space>
              <Popconfirm
                title='强制下架后，商品将不再展示，是否确定将该商品强制下架？'
                onConfirm={() => triggerForceShelfModal(drawerSelectGoods)}
                okText='确认'
                cancelText='取消'
                disabled={!drawerSelectGoods.length}
              >
                <Button danger disabled={!drawerSelectGoods.length}>
                  强制下架
                </Button>
              </Popconfirm>
              <Button disabled={!drawerSelectGoods.length} onClick={() => setDrawerSelectGoods([])}>
                取消
              </Button>
              <Button
                type='primary'
                disabled={!drawerSelectGoods.length}
                onClick={() => handleDisplay(1, drawerSelectGoods)}
              >
                展示所选商品
              </Button>
            </Space>
          </div>
        }
      >
        <Alert message='仅可以选择店铺已经上架的商品，选择后将展示在平台小程序商品列表中。' type='info' showIcon />
        <ProTable
          // search={false}
          search={{
            defaultCollapsed: false,
            labelWidth: 75,
            span: 6
          }}
          actionRef={selectGoodsTableRef}
          rowSelection={{
            selectedRowKeys: drawerSelectGoods,
            onChange: setDrawerSelectGoods
          }}
          request={async params => {
            const param = {
              page: params.current,
              page_size: params.pageSize,

              goods_name: params.goods_name,
              id: params.id,
              merchant_id: params.shop_name,
              is_display: 2
            }
            const res = await GetGoodsForDisplay(param)
            setAddGoodsPageSize(params.pageSize)
            setDrawerSelectGoods([])
            return {
              data: res.data,
              success: true,
              total: res.total
            }
          }}
          pagination={{
            pageSize: addGoodsPageSize
          }}
          options={false}
          rowKey='id'
          columns={selectGoodsColumns}
        />
      </Drawer>

      {/*下架原因弹窗*/}
      <Modal
        title={'下架原因'}
        mask
        open={shelfReasonModalFlag}
        onCancel={triggerForceShelfModal}
        bodyStyle={{ padding: '20px' }}
        width={600}
        destroyOnClose
        footer={
          <>
            <Button onClick={triggerForceShelfModal}>关闭</Button>
            <Button type={'primary'} loading={shelfReasonLoading} onClick={confirmForceShelf}>
              提交
            </Button>
          </>
        }
      >
        <Form form={formRef} onFinish={onForceShelfFinished} name='forceShelfForm' {...formItemLayout}>
          <Form.Item name='force_off_reason' label='下架原因' rules={[{ required: true, message: '请选择下架原因！' }]}>
            <Select onChange={checkNoteNeccesery} options={reasonList} placeholder='请选择' />
          </Form.Item>
          <Form.Item
            name='force_off_remark'
            label='备注'
            rules={[{ required: nodtNeccesery, message: '请输入备注内容！' }]}
          >
            <TextArea placeholder='请输入' />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}
